<template>
  <div style="padding: 20px">
    <el-form :model="form" :rules="formRules" ref="formRef" style="width: 780px;" label-width="180px">
      <el-form-item label="简介（需要校验）" prop="desc">
        <t-editor v-model="form.desc" key="1" :height="200" @input="handleInputDesc"></t-editor>
      </el-form-item>

      <el-form-item label="简介2（不需要校验）" prop="desc2">
        <t-editor v-model="form.desc2" key="2" :height="200"></t-editor>
      </el-form-item>

      <el-form-item label="简介3（隐藏toolbar）" prop="desc3">
        <t-editor v-model="form.desc3" key="3" :height="200" toolbar=""></t-editor>
      </el-form-item>

      <el-form-item label="简介4（自定义toolbar）" prop="desc4">
        <t-editor v-model="form.desc4" key="3" :height="200" :toolbar="toolbar"></t-editor>
      </el-form-item>

      <el-form-item >
        <el-button type="primary" @click="submit">校验</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import TEditor from '@/components/TEditor'
  import { sliceText } from '@/assets/js/utils/tools'
  export default {
    components: {
      TEditor
    },
    data () {
      // 校验 服务简介
      const checkDesc = (rule, value, callback) => {
        if (!sliceText(value).length) {
          callback(new Error('请输入描述'))
        } else {
          if (sliceText(value).length > 10) {
            callback(new Error('长度不能超过10位'))
          } else {
            callback()
          }
        }
      }
      return {
        form: {
          desc: '',
          desc2: '',
          desc3: '',
          desc4: '',
        },
        formRules: {
          desc: [
            { required: true, message: '请输入描述', trigger: 'change' },
            { validator: checkDesc, trigger: 'change' }
          ]
        },
        toolbar: 'undo redo'
      }
    },
    methods: {
      handleInputDesc (value) {
        this.$refs.formRef.validateField('desc')
      },
      submit () {
        this.$refs.formRef.validate((valid) => {
          console.log(valid);
        })
      }
    }
  }
</script

<style lang="scss" scoped>
</style>